{% extends 'base.html' %}

{#添加图表界面重写,element解析器哈哈哈#}

{% block container %}


    {% raw %}
    <div id="create_chart">

         <ul class="tabs" id="createchart_tabs">
            <li class="tab col s3"><a href="#group">分组</a></li>
            <li class="tab col s3"><a href="#agg">聚合</a></li>
            <li class="tab col s3"><a href="#sort">排序</a></li>
            <li class="tab col s3 disabled"><a href="#filter">过滤</a></li>
        </ul>


                <div id="group">
                    <div class="row">
                <div class="col s3">

                    <select   id="groupfield" v-model="nowgroup.field">
                        <option  v-bind:selected="nowgroup.field===field.value" v-bind:value="field.value" v-for="field in fields">{{ field.name }}</option>
                    </select>
                <label>按字段分组</label>
                </div><a v-on:click="addGroup()" class="btn">添加</a>
                </div>
                    <div class="row">
                        <div  v-on:click="selectGroup(index)" class="chip" v-for="(group,index) in groupText()">  {{ group }}<i v-on:click.stop='element.groupfield.splice(index,1)' class="material-icons close">close</i></div>
                    </div>
                </div>




                <div class="row" id="agg">
                <h4>agg</h4>
                </div>

        <div class="row" id="sort">


        <div class="col s3 input-field">
            <select></select>
        </div>

            <div class="col s3  input-field"><select id="order"><option value="desc">高到低</option><option value="asc">低到高</option></select></div>
            <div class="col s3  input-field"><label for="limit">Top选项</label><input type="text" value="-1" id="limit"/></div>

        </div>
    <div class="divider"></div>
        {% endraw %}

                 <div class="col s3 input-field">
                <select id="chartType">
                    {% for key,name in chartTypes.items() %}  <option value="{{ key }}">{{ name }}</option>  {% endfor %}
                </select>
                <label>图表类型</label>
                </div>
    {% raw %}
            <p>按<span class="red-text">{{ element.groupfield }}</span>分组,统计 <span class="green-text">得到xx</span>,按<span class="blue-text">abcd</span>排序</p>
    </div>

{% endraw %}

{% endblock %}

{% block script %}


    <script type="text/javascript">

var wm_add_chart = new Vue({

        el:'#create_chart',
        data:{
            //字段
            fields:[{
                name:'字段1',
                value:'field1'
            },{
                name:'字段2',
                value:'field2'
            }],


            nowgroup:{
                field:''
            },
            //单个元素的属性
            element:{
                //分组字段
                groupfield:['field1','field2'],
                //聚合字段
                aggfield:[]

            }
        },
        methods: {

            addGroup:function(){
                console.log('添加组:')
            },
            //添加分组
            removeGroup:function(index){
                console.log('移除组:'+index);
            },
            selectGroup:function(index){
                console.log('选择组:'+index);
                console.log(this.element);
                var f = this.element.groupfield[index];
                console.log(f);
                this.nowgroup.field=f;
                this.$nextTick(function () {
                    M.FormSelect.init(document.getElementById('groupfield'));
                });

            },
            //分组文字显示
            groupText: function () {
                var result = [];

                this.element.groupfield.forEach(function (ele) {

                    if (ele.startsWith('interval-')) {
                        var type_field = ele.split('-');
                        result.push('整数分组-' + type_field[1]);
                    } else {
                        result.push(ele)
                    }
                });
                return result;

            },
        },
        computed:{}

    });
wm_add_chart.$nextTick(function () {
    var tabs = M.Tabs.init(document.getElementById('createchart_tabs'));
});

$.ajax(
    {
        url:'../admin/setfield/fields?type=zs',
        method:'get',
        success:function (data) {
            console.log('加载数据成功:');
            console.log(data);

        },
        error:function (data) {
            console.log('加载失败:');
            console.log(data);
        }

    }
);
    </script>


{% endblock %}